<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-08-31 09:50:36
 * @LastEditors: guandeshen 295570679@qq.com
 * @LastEditTime: 2024-09-04 21:21:30
 * @FilePath: /task-admin/src/views/personalInfo/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="container">
    <div class="bg-[#fff] border-rd-8px box-border px-24px py-32px">
      <div
        class="flex justify-between items-center w-[100%] pb-16px border-b-[1px] border-solid border-[#ebedf0] mb-16px"
      >
        <span class="custom-title flex-1">
          {{ $t("route.personalInfo") }}
        </span>
      </div>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="auto"
        style="max-width: 560px"
      >
        <!-- <el-form-item :label="$t('common.userName')" prop="username">
          <el-input
            v-model="formData.username"
            :placeholder="$t('common.pleaseEnter')"
            disabled
          />
        </el-form-item> -->
        <el-form-item :label="$t('common.nickName')" prop="nickname">
          <el-input
            v-model="formData.nickname"
            :placeholder="$t('common.pleaseEnter')"
          />
        </el-form-item>
        <el-form-item :label="$t('common.jobNo')" prop="job_no">
          <el-input
            v-model="formData.job_no"
            :placeholder="$t('common.pleaseEnter')"
            disabled
          />
        </el-form-item>
        <el-form-item :label="$t('common.cellPhoneNumber')" prop="mobile">
          <el-input
            v-model="formData.mobile"
            :placeholder="$t('common.pleaseEnter')"
            disabled
          />
        </el-form-item>
        <el-form-item :label="$t('common.Gender')" prop="gender">
          <el-select v-model="formData.gender">
            <el-option :key="0" :label="$t('common.male')" :value="0" />
            <el-option :key="1" :label="$t('common.female')" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('common.email')" prop="email">
          <el-input
            v-model="formData.email"
            :placeholder="$t('common.pleaseEnter')"
          />
        </el-form-item>
        <el-form-item :label="$t('common.role')">
          <el-input
            v-model="formData.group_name"
            :placeholder="$t('common.pleaseEnter')"
            disabled
          />
        </el-form-item>
        <el-form-item :label="$t('common.jobTypes')" prop="type_of_work">
          <el-input
            v-model="formData.type_of_work"
            :placeholder="$t('common.pleaseEnter')"
            disabled
          />
        </el-form-item>
        <div class="border-b-[1px] border-solid border-[#ebedf0] mb-16px"></div>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">{{
            $t("common.save")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import UserAPI from "@/api/user";
import { UserInfo, chgUserInfoForm } from "@/api/user/model";
const { t } = useI18n();
const rules = reactive({
  // name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  // code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
  // dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
  // status: [{ required: true, message: "请选择状态", trigger: "blur" }],
});
const formData = reactive<UserInfo>({
  roles: [],
  menus: [],
});
const getUserInfo = () => {
  UserAPI.getInfo().then((data) => {
    Object.assign(formData, data);
  });
};

const formRef = ref(ElForm);
function handleSubmit() {
  formRef.value.validate((valid: any) => {
    if (valid) {
      // loading.value = true;
      const { nickname, mobile, gender, email } = formData;
      UserAPI.chgUserInfo({ nickname, mobile, gender, email }).then(() => {
        ElMessage.success(t("common.modifiedSuccessfully"));
      });
      // .finally(() => {
      //       loading.value = false;
      //     });
    }
  });
}

onMounted(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.custom-title {
  display: flex;
  align-items: center;
  color: #323233;
  font-family: "PingFang SC";
  font-size: 16px;
  font-weight: 900;
  text-transform: capitalize;
  &::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 22px;
    margin-right: 8px;
    background: #4e6bef;
  }
}
</style>
